<template>
  <ul class="icons">
    <li v-for="(item,index) in iconsList" :key="index" @click="goList(item)">
        <img :src="item.imgUrl" alt="">
        <span>{{item.title}}</span>
    </li>
  </ul>
</template>

<script>
export default {
    name:"Icons",
    props:{
        iconsList:{
            type:Array,
            required:true,
        }
    },
    data(){
        return{
            // iconsList:[
            //     {id:1,
            //     title:'自饮茶',
            //     imgUrl:'./images/icons1.png'
            //     },
            //     {id:2,
            //     title:'自饮茶',
            //     imgUrl:'./images/icons2.png'
            //     },
            //     {id:3,
            //     title:'自饮茶',
            //     imgUrl:'./images/icons3.png'
            //     },
            //     {id:4,
            //     title:'自饮茶',
            //     imgUrl:'./images/icons4.png'
            //     },
            //     {id:5,
            //     title:'自饮茶',
            //     imgUrl:'./images/icons5.png'
            //     },
            // ]
        }
    },
    methods:{
        //点击icon图标跳转到对应的分类表中
        goList(item){
            this.$router.push({
                name:'list',
                query:{
                    key:item.title
                }
            })
        }   
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;  
.icons{
    display: flex;
    justify-content: space-around;
    padding: (15 / @rootsize) 0;
    background-color: #fff;
    li{
        display: flex;
        flex-direction: column;
        align-items: center;
        
            img{
            width: (38 / @rootsize);
            height: (38 / @rootsize);
            
            }
            span{
               font-size:(16 / @rootsize);
               padding: (6 / @rootsize) 0;
            }
    }
    
}
</style>